<template>
  <div>
    <!-- 1、面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2、卡片区域 -->
    <el-card>
      <!-- 第一行： 添加分类按钮 -->
      <el-row>
        <el-button type="primary" @click="addCategoriesDialog">添加分类</el-button>
      </el-row>

      <!-- 第二行：树形表格组件 -->
      <tree-table
        class="treeTable"
        :data="categoriesList" 
        :columns="columns" 
        :selection-type="false" 
        :expand-type="false"
        border
        show-index
        index-text="#"
        >
        <!-- 插槽：slot只是个插槽名称 ： 这个名称写在columns哪一列中，就把内容放在哪一列中 -->
        <!-- 作用域插槽(获取这一行的数据)： scope或者slot-scope属性的scope.row表示获取这一行的数据 -->
        <!-- 是否有效 -->
        <template slot="Effective" scope="scope">
            <li :class="scope.row.cat_deleted==false?'el-icon-success':'el-icon-error'"></li>
        </template>
        <!-- 排序 -->
        <template slot="Level" scope="scope">
            <el-tag v-if="scope.row.cat_level=='0'">一级</el-tag>
            <el-tag v-if="scope.row.cat_level=='1'" type="success">二级</el-tag>
            <el-tag v-if="scope.row.cat_level=='2'" type="warning">三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="Operation" scope="scope">
          <el-button
              type="primary"
              icon="el-icon-edit"
              @click="EditCategoriesDiagle(scope.row)"
              size="small"
              >编辑</el-button>
          <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleteCategories(scope.row)"
              size="small"
              >删除</el-button>
        </template>
      </tree-table>

      <!-- 第三行 :分页区域 ： 把参数填进去，自动根据用户列表数据根据下面的参数分为几页，这个分页组件很好用。 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paramsObj.pagenum"
        :page-sizes="[5, 10, 15, 20, 30]"
        :page-size="paramsObj.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="categoriesTotal">
      </el-pagination>
    </el-card>

    <!-- 3、对话框 -->
    <!-- 1.0 添加分类对话框 -->
    <el-dialog
      title="添加分类"
      :visible.sync="addCategoriesDialogIsVisible"
      width="500px"
      @close="() => {this.$refs.addCategoriesFormRef.resetFields(); selectedKeysId=[];}"
    >
      <!-- 监听对话框关闭事件--关闭时触发close的事件函数： 重置表单数据 -->
      <!-- 表单 -->
      <el-form
        :model="addCategoriesObj"
        :rules="addCategoriesFormRules"
        ref="addCategoriesFormRef"
      >
        <el-form-item label="分类名称:" label-width="100px" prop="cat_name">
          <el-input v-model="addCategoriesObj.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类:" label-width="100px">
          <!-- 级联选择： 单选选择任意一级的任意一个选项选项 -->
              <!-- options指定数据源；:props是配置选项  model绑定选中的value值 clearable表示是可清除 -->
             <el-cascader
                v-model="selectedKeysId"
                expand-trigger="hover"
                :options="TwoCateList"
                :props="{label:'cat_name',value:'cat_id',children:'children'}"
                clearable
                change-on-select
                placeholder='可选择'
                >
                  <!-- 通过scoped slot对级联选择器的备选项的节点内容进行自定义，
                    scoped slot会传入两个字段 node 和 data，分别表示当前节点的 Node 对象和数据。 -->
                  <template slot-scope="{ node, data }">
                    <span>{{ data.cat_name }}</span>
                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <div slot="footer">
        <el-button @click="addCategoriesDialogIsVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategories">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data(){
      return {
        // 获取商品分类数据的参数对象
        paramsObj:{
            type:3,  //1表示获取一级，2表示获取1级和2级，3表示获取1、2、3级，不传递或者值为空也是获取1、2、3级数据
            pagenum:1,
            pagesize:5,
        },
        // 所有的分类： 商品分类数据列表
        categoriesList:[
          // {
          // cat_deleted: false,
          // cat_id: 1335,
          // cat_level: 0,
          // cat_name: "智能设备",
          // cat_pid: 0,
          // children: Array(5),
          // },
        ],
        // 符合条件的所有数据的条数
        categoriesTotal:0,
        // 为树形表格定义列属性 : 这里有4列
        columns:[
          {
            // label属性指定列标题
            label: '分类名称',
            // prop属性指定显示的值
            prop: 'cat_name',
          },
          {
            label: '是否有效',  // 当值为false时表示有效
            //prop属性是用来指定显示的值，但这一列是自定义的，因此不需要这个属性
            // prop: 'cat_delete',
            width: '150px',
            type: 'template',
            template: 'Effective',
          },
          {
            label: '排序',
            width: "150px",
            // 表示要自定义这一列
            type: 'template',
            // 插槽名为Level
            template: 'Level',
          },
          {
            label: '操作',
            width: "200px",
            // 当type属性值为template时，表示我们要自定义这一列
            type: 'template',
            // 插槽的名称为template的值
            template: 'Operation',
          }
        ],

        // 添加分类的对话框是否显示
        addCategoriesDialogIsVisible:false,
        // 点击添加分类按钮时请求要提交的的对象
        addCategoriesObj:{  //三个参数都不能为空
            /*父级id，
                如果要添加一级分类，父级的id应该设置为0，(级联选择框---什么都不选)
                如果要添加2级或者3级分类，父级id设置为选中的父级分类的id

              默认添加一级分类，它的父级分类id为0，
            */
            cat_pid:0,
            // 添加的分类的名称
            cat_name:'',
            // 添加该分类的等级，0表示一级分类；1表示二级分类；2表示三级分类，默认添加一级分类
            cat_level:0,
        },
        // 添加分类时，级联选择框的选择只需要前两级分类，因为我们是选它作为父类的，所以type属性默认为2，其他两个参数默认不选
        // 级联选择框的显示内容，只有前两级
        TwoCateList:[],
        // 当前选中分类的作为父级id(当选取二级时，第一个存的是一级的id，第二个存的二级的id)
        selectedKeysId:[],
        // 添加分类的表单校验规则
        addCategoriesFormRules: {
          cat_name: [ { required: true, message: '分类名称不能为空', trigger: 'blur' } ]
        },
      }
    },
    methods:{
        // 获取所有商品分类数据列表
        async getCategoriesList(){
            const res = await this.$http.get('categories',{params:this.paramsObj});
            console.log('商品分类列表：',res.data);
            if(res.data.meta.status!==200) return;

            this.categoriesList=res.data.data.result;
            this.categoriesTotal=res.data.data.total; 
        },
        // 改变每页显示数据条数
        handleSizeChange(newSize){
           this.paramsObj.pagesize=newSize;
           this.getCategoriesList();
        },
        //根据每页的大小和总数据条数获取共有几页
        handleCurrentChange(newPage){
          this.paramsObj.pagenum=newPage;
          this.getCategoriesList();
        },

        // 删除分类
        async deleteCategories(categories){
            // let result = await this.$messagebox.confirm('此操作将永久删除该用户, 是否继续?', '提示', {
            //   confirmButtonText: '确定',  //返回值为 confirm
            //   cancelButtonText: '取消',   //返回值为 cancel
            //   type: 'warning'
            // }).catch(() => this.$message({ type: 'info', message: '已取消删除'}) );

            // if(result == 'confirm'){
            //   console.log('categories：',categories);
            //   const res = await this.$http.delete('categories/'+categories.cat_id);
            //   console.log('删除分类：',res.data);
            //   if(res.data.meta.status!==200) return this.$message.error('删除商品分类失败!');
            //   this.$message.success('删除商品分类成功!');

            //   this.getCategoriesList();
              // categories = res.data.data;
            // }
        },

        // 编辑分类
        EditCategoriesDiagle(categories){

        },

        // 打开添加分类对话框
        async addCategoriesDialog(){
            this.addCategoriesDialogIsVisible=true;

            // 级联选择框获取选择数据
            const res = await this.$http.get('categories',{ params: {type:2} } );
            // console.log('级联选择框：',res.data);
            
            if(res.data.meta.status!==200) return;
            this.TwoCateList=res.data.data;
        },
        //添加分类
        async addCategories(){
            // 拿到整个表单对象，调用其函数
            this.$refs.addCategoriesFormRef.validate(async valid=>{
              if(!valid) return;

              // 如果长度等于0表示没有选中任何值，此时使用默认值，添加一级分类
              if(this.selectedKeysId.length>0){
                // 整个表单域预校验通过
                this.addCategoriesObj.cat_pid=this.selectedKeysId[this.selectedKeysId.length-1];
                //当级联选择了两级时，表示要添加的分类是第三级，第三级的cat_level的值为2
                this.addCategoriesObj.cat_level=this.selectedKeysId.length;
              }
                
              const res = await this.$http.post('categories',this.addCategoriesObj);
              console.log('添加分类：',res.data);

              if(res.data.meta.status!==201)  return this.$message.error('添加分类失败！');
              
              this.addCategoriesDialogIsVisible = false;
              this.$message.success('添加分类成功！');
              this.getCategoriesList();
            })
        },
    },
    created(){
        this.getCategoriesList();
    }
}
</script>

<style scoped>
 .el-card {
    width: 100%;
    margin-top: 10px;
    box-shadow: 0px 0px 3px skyblue;
    background-color: #fff;
  }
  /* 输入框和按钮所在盒子的宽度 */
  .treeTable{
    margin-top: 15px;
    font-size: 13px;
    width: 100%;
  }
  .el-pagination{
    margin-top: 10px;
  }
  /* 是否有效的两个图标 */
  .el-icon-success{
    font-size: 20px;
    color: #409EFF;
  }
  .el-icon-error{
    font-size: 20px;
    color: #909399;
  }
  /* 级联选择器 */
  .el-cascader{
    width: 100%;
  }
</style>